<template>
  <div>
    <CustomTitle title="仪器控制" />
    <div class="w-[586px] h-[311px] bg-[#1B1B1B] rounded-[10px] mt-[30px] flex flex-col justify-around px-[50px] py-[38px]">
      <a-spin :spinning="loading">
        <div class="grid grid-cols-5 w-full">
          <!-- <div class="flex"> -->
          <div class="text-[14px] text-label-normal flex flex-col justify-center items-center">
            <div class="w-[40px] h-[40px] mb-[14px] flex items-center">
              <a-switch :disabled="disabledAll || disabledVacuum" :loading="vacuumLoading" v-model:checked="vacuum" @change="changeVacuum" />
            </div>
            <span class="mt-[14px]">真空</span>
          </div>
          <div class="text-[14px] text-label-normal flex flex-col justify-center items-center">
            <div class="w-[40px] h-[40px] mb-[14px] flex items-center">
              <a-switch :disabled="disabledAll || disabledFire" @change="changeFire" :loading="fireLoading" v-model:checked="fire" />
            </div>
            <span class="mt-[14px]">点火</span>
          </div>
          <!-- </div> -->
          <div class="text-[14px] cursor-pointer flex flex-col justify-center items-center" @click="createBatch">
            <img src="@/assets/images/batch1.png" class="w-[40px] h-[40px] mb-[14px]" />
            <span class="text-label-normal mt-[14px]">创建batch</span>
          </div>
          <!-- <div class="cursor-pointer flex flex-col justify-center items-center" @click="createBatch">
            <img src="@/assets/images/open_batch.png" class="w-[40px] h-[40px] mb-[14px]" />
            <span class="text-label-normal mt-[14px]">打开batch</span>
          </div> -->
          <div class="text-[14px] cursor-pointer flex flex-col justify-center items-center" @click="openSetting">
            <img src="@/assets/images/setting.png" class="w-[40px] h-[40px] mb-[14px]" />
            <span class="text-label-normal mt-[14px]">设置</span>
          </div>
        </div>
        <!-- <div class="flex items-center mt-[60px]"> -->
        <div class="grid grid-cols-5 mt-[60px]">
          <div class="item" @click="() => start(1)">
            <img v-if="status === '采集终止' || status === '空闲'" src="@/assets/images/start_active.png" class="w-[51px] h-[50px] object-cover mb-[14px]" />
            <img v-else src="@/assets/images/start.png" class="w-[51px] h-[50px] object-cover mb-[14px]" />
            <span class="text-[14px]">采集开始</span>
          </div>
          <div class="item" @click="() => pause(1)">
            <img v-if="status === '采集暂停'" src="@/assets/images/restore_active.png" class="w-[50px] h-[52px] object-cover mb-[14px]" />
            <img v-else src="@/assets/images/restore.png" class="w-[50px] h-[52px] object-cover mb-[14px]" />
            <span class="text-[14px]">采集恢复</span>
          </div>
          <div class="item" @click="() => pause(0)">
            <img v-if="status === '采集中'" src="@/assets/images/pause_active.png" class="w-[51px] h-[50px] object-cover mb-[14px]" />
            <img v-else src="@/assets/images/pause.png" class="w-[51px] h-[50px] object-cover mb-[14px]" />
            <span class="text-[14px]">采集暂停</span>
          </div>
          <div class="item" @click="() => start(0)">
            <img v-if="status === '采集中' || status === '采集暂停'" src="@/assets/images/stop_active.png" class="w-[51px] h-[52px] object-cover mb-[14px]" />
            <img v-else src="@/assets/images/stop.png" class="w-[51px] h-[52px] object-cover mb-[14px]" />
            <span class="text-[14px]">采集停止</span>
          </div>
        </div>
      </a-spin>
    </div>
  </div>
</template>
<script setup lang="ts">
import { apiPause, apiPlasma, apiRun, apiVacuum } from '@/http/api/controller_status';
import { eCollectionStatus } from '@/interface/enum';
import { message } from 'ant-design-vue';

const vacuum = ref(false);
const fire = ref(false);
const emit = defineEmits(['createBatch', 'refresh', 'openSetting']);
const props = defineProps<{ status: string }>();
const loading = ref(false);
const fireLoading = ref(false);
const disabledAll = ref(false);
const disabledFire = ref(false);
const disabledVacuum = ref(false);
const disabledCollection = ref(false);
const vacuumLoading = ref(false);
const collectionStatus = ref<eCollectionStatus>(eCollectionStatus.NONE);
const createBatch = () => {
  emit('createBatch');
};
const openSetting = () => {
  emit('openSetting');
};
const changeVacuum = async (e: any) => {
  vacuumLoading.value = true;
  try {
    const res = await apiVacuum(e ? 1 : 0);
    console.log(res.msg);
  } catch (error) {
    console.log(error);
    message.error((error as any).msg);
    vacuum.value = !e;
  } finally {
    vacuumLoading.value = false;
    emit('refresh');
  }
};

const changeFire = async (e: any) => {
  fireLoading.value = true;
  try {
    const res = await apiPlasma(e ? 1 : 0);
    console.log(res.msg);
  } catch (error) {
    console.log(error);
    message.error((error as any).msg);
    fire.value = !e;
  } finally {
    fireLoading.value = false;
    emit('refresh');
  }
};

const start = async (arg: 1 | 0) => {
  if (disabledAll.value || disabledCollection.value) return;
  if (arg === 1 && props.status !== '采集终止' && props.status !== '空闲') return;
  if (arg === 0 && props.status !== '采集中' && props.status !== '采集暂停') return;
  loading.value = true;
  try {
    const res = await apiRun(arg);
    message.success(res.msg);
  } catch (error) {
    message.error((error as any).msg);
  } finally {
    emit('refresh');
    loading.value = false;
  }
};
const pause = async (arg: 1 | 0) => {
  if (disabledAll.value || disabledCollection.value) return;
  console.log(arg, props.status);

  if (arg === 1 && props.status !== '采集暂停') return;
  if (arg === 0 && props.status !== '采集中') return;
  loading.value = true;
  try {
    const res = await apiPause(arg);
    message.success(res.msg);
  } catch (error) {
    message.error((error as any).msg);
  } finally {
    emit('refresh');
    loading.value = false;
  }
};
watch(
  () => props.status,
  val => {
    if (val === '空闲') {
      vacuum.value = true;
      fire.value = true;
    } else if (val === '真空打开中') {
      disabledAll.value = true;
      vacuum.value = false;
      fire.value = false;
      collectionStatus.value = eCollectionStatus.NONE;
    } else if (val === '真空打开') {
      vacuum.value = true;
      disabledVacuum.value = false;
      fire.value = false;
      disabledAll.value = false;
      disabledFire.value = false;
      disabledCollection.value = true;
      collectionStatus.value = eCollectionStatus.NONE;
    } else if (val === '点火中' || val === '熄火中') {
      vacuum.value = true;
      collectionStatus.value = eCollectionStatus.NONE;
    } else if (val === '采集中' || val === '采集暂停' || val === '采集终止') {
      vacuum.value = true;
      fire.value = true;
    }
  },
  {
    immediate: true,
  }
);
</script>
<style lang="less" scoped>
.item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #e6e6e6 !important;
  font-size: 12px;
  // margin-right: 60px;
  cursor: pointer;
}
</style>
